<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公式管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 16px;
            text-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 18px;
            opacity: 0.9;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .toolbar h2 {
            color: white;
            font-size: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .toolbar-buttons {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #4facfe;
            color: white;
            box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
        }

        .btn-primary:hover {
            background: #2196f3;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
        }

        .btn-secondary {
            background: rgba(255,255,255,0.2);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .formula-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .formula-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .formula-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 48px rgba(0,0,0,0.15);
        }

        .formula-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .formula-name {
            font-size: 20px;
            font-weight: 700;
            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .formula-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 16px;
            line-height: 1.5;
            min-height: 42px;
        }

        .formula-expression {
            background: #f8f9ff;
            border: 1px solid #e1e5f2;
            border-radius: 8px;
            padding: 12px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #4facfe;
            margin-bottom: 16px;
            word-break: break-all;
            min-height: 60px;
            display: flex;
            align-items: center;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #eee;
        }

        .card-date {
            font-size: 12px;
            color: #999;
        }

        .card-actions {
            display: flex;
            gap: 8px;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-edit {
            background: #28a745;
            color: white;
        }

        .btn-edit:hover {
            background: #218838;
        }

        .btn-delete {
            background: #dc3545;
            color: white;
        }

        .btn-delete:hover {
            background: #c82333;
        }

        .empty-state {
            text-align: center;
            padding: 80px 20px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
        }

        .empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .empty-text {
            font-size: 18px;
            margin-bottom: 12px;
        }

        .empty-subtext {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 24px;
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 80px;
            color: white;
            font-size: 18px;
        }

        .loading::before {
            content: '';
            width: 32px;
            height: 32px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 12px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-state {
            text-align: center;
            padding: 40px;
            background: rgba(220, 53, 69, 0.1);
            border: 1px solid rgba(220, 53, 69, 0.3);
            border-radius: 12px;
            color: #dc3545;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 36px;
            }
            
            .toolbar {
                flex-direction: column;
                gap: 16px;
                align-items: stretch;
            }
            
            .toolbar-buttons {
                justify-content: center;
            }
            
            .formula-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🧮 公式管理系统</h1>
            <p>可视化拖拽设计，轻松创建和管理数学公式</p>
        </div>

        <div class="toolbar">
            <h2>📂 我的公式</h2>
            <div class="toolbar-buttons">
                <button class="btn btn-secondary" onclick="refreshFormulas()">
                    🔄 刷新
                </button>
                <a href="edit.html" class="btn btn-primary">
                    ➕ 新建公式
                </a>
            </div>
        </div>

        <div id="formulaContainer">
            <div class="loading">
                正在加载公式列表...
            </div>
        </div>
    </div>

    <script>
        let formulas = [];

        // 页面加载时获取公式列表
        document.addEventListener('DOMContentLoaded', function() {
            loadFormulas();
        });

        // 加载公式列表
        async function loadFormulas() {
            const container = document.getElementById('formulaContainer');
            
            try {
                const response = await fetch('http://localhost:9999/api/formula/list');
                const result = await response.json();
                
                if (result.success && result.data) {
                    formulas = result.data;
                    renderFormulas(formulas);
                } else {
                    showError(`加载失败: ${result.message || '未知错误'}`);
                }
                
            } catch (error) {
                showError(`网络错误: ${error.message}`);
            }
        }

        // 渲染公式列表
        function renderFormulas(formulas) {
            const container = document.getElementById('formulaContainer');
            
            if (formulas.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">📭</div>
                        <div class="empty-text">还没有创建任何公式</div>
                        <div class="empty-subtext">点击"新建公式"开始创建你的第一个公式</div>
                        <a href="edit.html" class="btn btn-primary">
                            ➕ 新建公式
                        </a>
                    </div>
                `;
                return;
            }

            const grid = document.createElement('div');
            grid.className = 'formula-grid';

            formulas.forEach(formula => {
                const card = createFormulaCard(formula);
                grid.appendChild(card);
            });

            container.innerHTML = '';
            container.appendChild(grid);
        }

        // 创建公式卡片
        function createFormulaCard(formula) {
            const card = document.createElement('div');
            card.className = 'formula-card';
            card.onclick = function() {
                editFormula(formula);
            };

            const createDate = new Date(formula.createTime).toLocaleDateString();
            const updateDate = new Date(formula.updateTime).toLocaleDateString();
            const showUpdateDate = formula.updateTime !== formula.createTime;

            card.innerHTML = `
                <div class="card-header">
                    <div class="formula-name">
                        📊 ${formula.name}
                    </div>
                </div>
                
                <div class="formula-description">
                    ${formula.description || '暂无描述'}
                </div>
                
                <div class="formula-expression">
                    ${formula.expression || '暂无公式'}
                </div>
                
                <div class="card-footer">
                    <div class="card-date">
                        <div>📅 ${createDate}</div>
                        ${showUpdateDate ? `<div>🔄 ${updateDate}</div>` : ''}
                    </div>
                    <div class="card-actions">
                        <button class="btn-small btn-edit" onclick="editFormula(arguments[0]); event.stopPropagation();" data-formula='${JSON.stringify(formula).replace(/'/g, "&apos;")}'>
                            ✏️ 编辑
                        </button>
                        <button class="btn-small btn-delete" onclick="deleteFormula('${formula.name}'); event.stopPropagation();">
                            🗑️ 删除
                        </button>
                    </div>
                </div>
            `;

            // 为按钮重新绑定事件，避免JSON解析问题
            const editBtn = card.querySelector('.btn-edit');
            const deleteBtn = card.querySelector('.btn-delete');
            
            editBtn.onclick = function(e) {
                e.stopPropagation();
                editFormula(formula);
            };
            
            deleteBtn.onclick = function(e) {
                e.stopPropagation();
                deleteFormula(formula.name);
            };

            return card;
        }

        // 编辑公式
        function editFormula(formula) {
            // 使用URL参数传递公式名称
            const editUrl = `edit.html?formula=${encodeURIComponent(formula.name)}`;
            window.open(editUrl, '_blank');
        }

        // 删除公式
        async function deleteFormula(formulaName) {
            if (!confirm(`确定要删除公式 "${formulaName}" 吗？\n此操作无法撤销。`)) {
                return;
            }

            try {
                const response = await fetch(`http://localhost:9999/api/formula/delete/${encodeURIComponent(formulaName)}`, {
                    method: 'DELETE'
                });

                const result = await response.json();
                
                if (result.success) {
                    alert('✅ 删除成功');
                    loadFormulas(); // 重新加载列表
                } else {
                    alert(`❌ 删除失败: ${result.message}`);
                }

            } catch (error) {
                alert(`❌ 删除失败: ${error.message}`);
            }
        }

        // 刷新公式列表
        function refreshFormulas() {
            const container = document.getElementById('formulaContainer');
            container.innerHTML = '<div class="loading">正在刷新...</div>';
            loadFormulas();
        }

        // 显示错误信息
        function showError(message) {
            const container = document.getElementById('formulaContainer');
            container.innerHTML = `
                <div class="error-state">
                    <div style="font-size: 48px; margin-bottom: 16px;">❌</div>
                    <div style="font-size: 18px; margin-bottom: 8px;">加载失败</div>
                    <div style="font-size: 14px; margin-bottom: 20px;">${message}</div>
                    <button class="btn btn-primary" onclick="loadFormulas()">
                        🔄 重试
                    </button>
                </div>
            `;
        }
    </script>
</body>
</html>
